import { Popconfirm, Popover } from 'antd';

const columnConfig = {
  sort: {
    name: '序号',
    code: 'sort',
    width: 60,
    render(v, r, i) {
      return i + 1;
    }
  },
  roleName: {
    name: "角色名称",
    code: "roleName",
    width: 120
  },
  note: {
    name: "备注",
    code: "note",
    width: 200,
    render: (text) => {
      if (text) {
        return (
          <Popover content={(
            <div className='custom-ant-popver-content'>
              {text || ''}
            </div>)}
          >
            <span className='textOverflowMultiTwo'>
              {text || ''}
            </span>
          </Popover>
        )
      } else {
        return ''
      }
    }
  },
  opera: {
    name: "操作",
    code: "id",
    width: 80,
  },
}

//渲染操作列
const RenderOpera = ({ handleOpera, record }) => {
  return (
    <span className="opera-span-common">
      <span onClick={() => handleOpera('edit',record)}>编辑</span>
      {
        record.roleType !== 3 ? (
          <>
            <i>|</i>
            <Popconfirm
              title="确定要删除吗?"
              onConfirm={() => handleOpera('delete',record)}
              okText="确定"
              cancelText="取消"
            >
              <span>删除</span>
            </Popconfirm>
          </>
        ) : null
      }
    </span>
  )
}

//获取列数据
export const getColumns = ({ handleOpera }) => {
  const arr = [];
  Object.keys(columnConfig).map(v => {
    const item = columnConfig[v];
    if (v == 'opera') {
      item.render = (t, r) => <RenderOpera handleOpera={handleOpera} record={r} />;
    }
    arr.push(item);
  })
  return arr;
}